<template>
    <div>
        {{ name }}-{{ age }}
    </div>
</template>

<script setup>
import { reactive, toRefs } from 'vue';

let student = reactive({
    name: '小明',
    age: 22
});

let { name, age } = toRefs(student);

setTimeout(() => {
    name.value = '小黑';
    age.value = 22;
    console.log(name, age)
}, 2000);
</script>

<!-- <script>
import { reactive, toRefs } from 'vue';

export default {
    setup() {
        let student = reactive({
            name: '小明',
            age: 22
        });

        // 如果对象被ES6解构语法给解构了，它们就不是响应式的数据了
        let { name, age } = toRefs(student);

        // 2s后修改数据，看看页面数据有没有修改
        setTimeout(() => {
            name.value = '小黑';
            age.value = 22;
            console.log(name, age)
        }, 2000);

        return {
            name, age,
        }
    }
}
</script> -->